<!-- Created by xxxxx on xxxx/xx/xx -->
<template>
    <!--canvasCom组件用途
    props:
    events:
    slots:
    use:
  -->
    <div id="canvasCom" class="comBox">
        <canvas id="tutorial" width="150" height="150">
            <!-- 如不支持 则显示 -->
            <span>对不起，你的浏览器不支持canvas</span>
        </canvas>
        <canvas id="tutorial2" width="150" height="150">
            <!-- 如不支持 则显示 -->
            <span>对不起，你的浏览器不支持canvas</span>
        </canvas>
    </div>
</template>

<script>
    import $ from 'jquery'
    export default {
        name: 'canvasCom',
        props: {},
        components: {},
        data() {
            return {}
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
            var tutorial = document.querySelector('#tutorial');
            // 需要用js方法设置宽高 css无效
            tutorial.width = '400';
            tutorial.height = '400';
            // 判断是否支持获取上下文
            if (!tutorial.getContext) return;
            var ctx = tutorial.getContext('2d');
//            this.drawRect(ctx)
//            this.drawPath(ctx)
//            this.drawSmile(ctx)
//            this.drawArc(ctx)
//            this.drawQuadraticCurveTo(ctx)
//            this.drawBezierCurveTo(ctx)
            this.drawWaveAnimate(ctx);
//            this.drawColors(ctx);
//            this.drawLine(ctx);
//            this.drawDash(ctx);
//            this.drawLinearGradient(ctx);
//            this.drawRadialGradient(ctx);
//            this.drawPatterns(ctx);
//            this.drawShadow(ctx);
//            this.drawText(ctx);
//            this.drawImage(ctx);
//            this.drawImagSlicing(ctx);
//            this.drawSaveRestore(ctx);
//            this.drawTransform(ctx);
//            this.drawClip(ctx);
//            this.drawClip2(ctx);
//            this.drawClipImage(ctx);
            this.drawImageData(ctx);
        },
        activated() {
        },
        deactivated() {
        },
        methods: {
            // 绘制矩形
            drawRect(ctx) {
                ctx.fillStyle = "blue";
                ctx.fillRect(25, 25, 100, 100);
                ctx.clearRect(45, 45, 60, 60)
                ctx.strokeRect(50, 50, 50, 50);
            },
            // 绘制矩形
            drawSmile(ctx) {
                ctx.beginPath();
                ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
                ctx.moveTo(110, 75);     // moveTo 等于说是抬笔 去下个地方再落笔；如果没有moveTo则是连笔画
                ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)
                ctx.moveTo(65, 65);
                ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
                ctx.moveTo(95, 65);
                ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
                ctx.stroke();
            },
            // 绘制路径
            drawPath(ctx) {
                ctx.beginPath();
                ctx.moveTo(75, 50);
                ctx.lineTo(100, 75);
                ctx.lineTo(100, 25);
                ctx.closePath();        // 闭合是必要的
                ctx.strokeStyle = 'red';
                ctx.stroke();
                ctx.fillStyle = 'green';
                ctx.fill();

                ctx.beginPath();
                ctx.moveTo(175, 150);
                ctx.lineTo(200, 175);
                ctx.lineTo(200, 125);
                ctx.closePath();        // 闭合是必要的
                ctx.strokeStyle = 'red';
                ctx.stroke();
                ctx.fillStyle = 'green';
                ctx.fill();
            },
            // 绘制圆弧
            drawArc(ctx) {
                // 弧度=(Math.PI/180)*角度。
                ctx.beginPath();
                ctx.arc(200, 200, 100, 0, (Math.PI / 180) * 180, false); // 默认 false为顺时针 true为逆时针
                ctx.stroke();
                ctx.closePath();
            },
            // 绘制二次贝塞尔曲线
            drawQuadraticCurveTo(ctx) {
                ctx.beginPath();
                ctx.moveTo(75, 25);
                ctx.quadraticCurveTo(25, 25, 25, 62.5);
                ctx.quadraticCurveTo(25, 100, 50, 100);
                ctx.quadraticCurveTo(50, 120, 30, 125);
                ctx.quadraticCurveTo(60, 120, 65, 100);
                ctx.quadraticCurveTo(125, 100, 125, 62.5);
                ctx.quadraticCurveTo(125, 25, 75, 25);
                ctx.stroke();
            },
            // 绘制三次贝塞尔曲线
            drawBezierCurveTo(ctx) {
                ctx.beginPath();
                ctx.moveTo(75, 40);
                ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
                ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
                ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
                ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
                ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
                ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
                ctx.fill();
            },
            // 利用三次贝塞尔曲线 绘制波浪
            drawWave(ctx, y1, y2, fillStyle, x1, x2) {
                ctx.beginPath();
                ctx.moveTo(0, 400);
                ctx.lineTo(0, 200);
//                ctx.moveTo(0,200);
                ctx.bezierCurveTo(x1, y1, x2, y2, 400, 200);
                ctx.lineTo(400, 400);
                ctx.closePath();
//                ctx.stroke();
                ctx.fillStyle = fillStyle;
                ctx.fill();
            },
            // 波浪 动画
            drawWaveAnimate(ctx) {
                var y1 = 50, y2 = 350, x1 = 0, x2 = 200;
                var _this = this;
                var sign = 1;
                var xSign = 1;
                var my_gradient = ctx.createLinearGradient(0, 400, 0, 100);
                my_gradient.addColorStop(0, "#3399FF");
                my_gradient.addColorStop(1, "white");
                setInterval(function () {
                    ctx.clearRect(0, 0, 400, 400)
                    y1 += sign;
                    y2 -= sign;
                    x1 += xSign;
                    x2 += xSign;
                    if (y1 >= 350 || y1 <= 50) {
                        sign = -sign;
                    }
                    if (x1 >= 200 || x1 <= 0) {
                        xSign = -xSign;
                    }
                    _this.drawWave(ctx, y1, y2, my_gradient, x1, x2)
                }, 10)
            },
            // 颜色
            drawColors(ctx) {
                for (let i = 0; i < 10; i++) {
                    ctx.fillStyle = `rgba(255,0,0,${i / 10})`;
                    ctx.fillRect(i * 30, 0, (i + 1) * 30, 100);
                    ctx.fill();
                }
            },
            // 直线
            drawLine(ctx) {
                ctx.lineWidth = 10;
                var lineCapArr = ['butt', 'round', 'square'];
                var lineJoinArr = ['miter', 'round', 'bevel'];
                lineCapArr.forEach((item, index) => {
                    ctx.lineCap = item;
                    ctx.lineJoin = lineJoinArr[index];
                    ctx.beginPath();
                    ctx.moveTo(100 * index + 10, 300);
                    ctx.lineTo(100 * index + 50, 350);
                    ctx.lineTo(100 * index + 80, 300);
                    ctx.stroke()
                })

            },
            // 虚线
            drawDash(ctx) {
                let offset = 0;
                setInterval(() => {
                    offset--
                    ctx.clearRect(0, 0, 400, 400)
                    ctx.beginPath()
                    ctx.setLineDash([4, 2]);
                    ctx.lineDashOffset = offset;
                    ctx.strokeRect(10, 10, 100, 100);
                }, 100)
            },
            // 直向渐变
            drawLinearGradient(ctx) {
                var lingrad = ctx.createLinearGradient(0, 0, 150, 150);
                lingrad.addColorStop(0, '#00ABEB');
                lingrad.addColorStop(0.5, '#fff');
                lingrad.addColorStop(0.5, '#26C000');
                lingrad.addColorStop(1, '#fff');
                ctx.fillStyle = lingrad;
                ctx.fillRect(0, 0, 150, 150);
            },
            // 径向渐变
            drawLinearGradient(ctx) {
                // createRadialGradient(x1, y1, r1, x2, y2, r2)
                // createRadialGradient 方法接受 6 个参数，
                // 前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
                var radgrad = ctx.createRadialGradient(75, 75, 0, 75, 75, 75);
                radgrad.addColorStop(0, 'blue');
                radgrad.addColorStop(0.5, 'green');
                radgrad.addColorStop(0.8, 'pink');
                radgrad.addColorStop(0.9, 'black');
                radgrad.addColorStop(1, 'rgba(0,0,0,0)')
                ctx.fillStyle = radgrad;
                ctx.fillRect(0, 0, 150, 150);
            },
            // 图案样式
            drawPatterns(ctx) {
                var img = new Image();
                img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
                img.onload = function () {
                    // 创建图案
                    var ptrn = ctx.createPattern(img, 'repeat')
                    ctx.fillStyle = ptrn;
                    ctx.fillRect(0, 0, 400, 400);
                }
            },
            // 阴影
            drawShadow(ctx) {
                ctx.shadowOffsetX = 5;
                ctx.shadowOffsetY = 5;
                ctx.shadowBlur = 2;
                ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
                ctx.font = "30px Times New Roman";
                ctx.fillStyle = "Black";
                ctx.fillRect(50, 50, 100, 100);
                ctx.fillText("Sample String", 5, 30);
            },
            // 阴影
            drawText(ctx) {
                ctx.font = "20px 微软雅黑";
                ctx.textAlign = "left";
                ctx.textBaseline = "alphabetic";
                ctx.direction = "rtl";
                var text = ctx.measureText("Hello world"); // TextMetrics object
                // console.log(text.width)
                ctx.fillStyle = '#f00';
                ctx.fillText("Hello world", 10, 50, text.width);
                ctx.textBaseline = "top";
                ctx.strokeText("Hello world2", 200, 50, 150);
            },
            // 图像
            drawImage(ctx) {
                var img = new Image();
//                img.src = require('./images/logo.png');
                img.src = '';
                img.onload = function () {
                    for (let i = 0; i < 8; i++) {
                        for (let j = 0; j < 8; j++) {
                            ctx.drawImage(img, 50 * i, 50 * j, 50, 50);
                        }
                    }
                }
            },
            // 图像切片 drawImage(image, sx, sy,sWidth, sHeight, dx, dy, dWidth, dHeight)
            // 用来多张图片 合成的作用
            drawImagSlicing(ctx) {
                var img = new Image();
                img.src = require('./images/meinv.jpg');
                img.onload = function () {
                    // img.width img.height来获取高度长度 避免长宽失真
                    ctx.drawImage(img, 0, 0, 400, 400);
                    ctx.drawImage(img, 0, 0, 400, 400, 100, 100, 100, 100);
                }
            },
            // 状态save 跟 restore
            drawSaveRestore(ctx) {
                // save() 为保存状态 包括颜色配置等 类似
                ctx.fillRect(0,0,150,150);   // 使用默认设置绘制一个矩形
                ctx.save()
                ctx.fillStyle = '#f00';
                ctx.fillRect(15,15,120,120); // 使用新的设置绘制一个矩形
                ctx.save()
                ctx.fillStyle = '#FFF'       // 再次改变颜色配置
                ctx.globalAlpha = 0.5;
                ctx.fillRect(30,30,90,90);   // 使用新的配置绘制一个矩形
                ctx.restore();               // 重新加载之前的颜色状态
                ctx.fillRect(45,45,60,60);   // 使用上一次的配置绘制一个矩形
                ctx.restore();               // 加载默认颜色配置
                ctx.fillRect(60,60,30,30);   // 使用加载的配置绘制一个矩形
            },
            // 变形 transform
            drawTransform(ctx) {
//                ctx.translate(100,100);
//                ctx.rotate(Math.PI*2/8);
//                ctx.scale(2,3);
//                ctx.fillRect(0, 0, 25, 25);
                // setTransform 类似css3中transform的skew
                ctx.setTransform(1, 0, 1, 1, -20, -20);
                ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
                ctx.resetTransform() // 等于ctx.setTransform(1, 0, 0, 1, 0, 0);
                ctx.fillRect(50, 50, 100, 100);
            },
            // 裁切 clip
            drawClip(ctx) {
//              ctx.fillRect(0,0,150,150);
                ctx.translate(75,75);

                // Create a circular clipping path
                ctx.beginPath();
                ctx.arc(0,0,60,0,Math.PI*2,true);
                ctx.clip();

                // draw background
                var lingrad = ctx.createLinearGradient(0,-75,0,75);
                lingrad.addColorStop(0, '#232256');
                lingrad.addColorStop(1, '#143778');

                ctx.fillStyle = lingrad;
                ctx.fillRect(-75,-75,150,150);

                // draw stars
                for (var j=1;j<50;j++){
                    ctx.save();
                    ctx.fillStyle = '#fff';
                    ctx.translate(75-Math.floor(Math.random()*150),
                        75-Math.floor(Math.random()*150));
                    this.drawStar(ctx,Math.floor(Math.random()*4)+2);
                    ctx.restore();
                }
            },
            // 裁切 图像
            drawClipImage (ctx) {
                var _this = this;
                var img = new Image();
                img.src = require('./images/meinv.jpg');
                img.onload = function () {
                    ctx.drawImage(img, 0, 0, 400, 400)
                }
                $('#tutorial').on('mousedown',function (ev){
                    var initX = ev.offsetX;
                    var initY = ev.offsetY;
                    $(document).on('mousemove',function (ev2){
                        _this.drawClip2(ctx,initX,initY,ev2.offsetX,ev2.offsetY,img)
                    })
                    $(document).on('mouseup',function(){
                        $(document).off('mousemove')
                    })
                })
            },
            drawClip2 (ctx,initX,initY,moveX,moveY,img) {
                ctx.clearRect(0,0,400,400);
                ctx.save()
                ctx.beginPath()
//                ctx.lineWidth = 50;
//                ctx.strokeStyle = 'rgba(0,0,0,0.5)';
                ctx.rect(initX,initY,moveX-initX,moveY-initY);
                ctx.strokeText((moveX - initX) + ' , ' + (moveY-initY), initX + 10,initY - 10);
                ctx.stroke()
                ctx.clip();
                ctx.drawImage(img, 0, 0, 400, 400);
                ctx.restore()
            },
            drawStar(ctx,r){
                ctx.save();
                ctx.beginPath()
                ctx.moveTo(r,0);
                for (var i=0;i<9;i++){
                    ctx.rotate(Math.PI/5);
                    if(i%2 == 0) {
                        ctx.lineTo((r/0.525731)*0.200811,0);
                    } else {
                        ctx.lineTo(r,0);
                    }
                }
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            },
            // ImageData对象
            drawImageData(ctx){
                var img = new Image();
                img.src = require('./images/meinv.jpg');
                img.onload = function() {
                    ctx.drawImage(img, 0, 0,tutorial.width,tutorial.height);
                    var imageData = ctx.getImageData(150,0,250,250);
                    var tutorial2 = document.querySelector('#tutorial2');
                    var ctx2 = tutorial2.getContext('2d');
                    ctx2.putImageData(imageData, 0, 0);
                    // console.log('imageData',imageData)
                    var newImage = tutorial2.toDataURL('image/png');
                    // console.log('newImage',newImage)
                };
            },
        }
    }
</script>

<style rel="stylesheet" lang="scss" scoped>

    #canvasCom {

        padding: 20px;
        /*background: url(./images/meinv.jpg) no-repeat 20px 20px;*/
        /*background-size: 400px 400px;*/
        #tutorial {
            outline: 2px solid #ddd;
            float: left;
        }
        #tutorial2{
            float: left;
        }
    }
</style>
